<template>
    <el-drawer
      v-model="dialogFormVisible"
      :title="dialogTitle"
      size="80%"
    >
      <el-form
        :model="info"
        ref="formRef"
        label-position="right"
        label-width="80px"
        size="default"
        :scroll-to-error="true"
        :show-message="false"
      >
        <el-form-item
          label="标题"
          prop="title"
          class="required label-right-align"
          label-width="120px"
        >
          <el-text>{{ info.title }}</el-text>
        </el-form-item>
        <el-form-item
          label="用户姓名"
          prop="field"
          class="required label-right-align"
          label-width="120px"
        >
            <el-text>{{ info.user?.real_name }}</el-text>
        </el-form-item>
        <el-form-item
          label="当前状态"
          prop="field"
          class="required label-right-align"
          label-width="120px"
        >
        <el-tag type="warning" v-if="info.status == 0">待签</el-tag>
        <el-tag type="success" v-else-if="info.status == 1">已签</el-tag>
        </el-form-item>
        <el-form-item
          label="合同内容"
          prop="content"
          class="required label-right-align"
          label-width="120px"
        >
            <div v-html="info.content"></div>
        </el-form-item>
        <el-form-item
          label="合同文件"
          prop="content"
          class="required label-right-align"
          label-width="120px"
          v-if="info.file"
        >
            <el-link :href="info.file" type="primary" target="_blank"></el-link>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">关闭</el-button>
        </div>
      </template>
    </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, defineExpose, defineEmits, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import Uediter from "@/components/UE.vue";
  import { getInfoApi } from "@/api/contract/contract";
  const dialogFormVisible = ref(false);
  const dialogTitle = ref("合同详情");
  const info = ref<any>({
    id: 0,
    title: "",
    user:{} as any,
    content: "",
    sort: 0,
  });
  function getInfo(id) {
    getInfoApi(id)
      .then((res: any) => {
        if (res.code == 1) {
          info.value = res.data;
        } else {
          ElMessage.error(res.msg);
        }
      })
      .catch((err) => {});
  }
  
  const dialogClose = () => {
    dialogFormVisible.value = false;
  };
  
  const dialogOpen = (id: number) => {
    dialogFormVisible.value = true;
    getInfo(id);
  };
  defineExpose({
    dialogOpen,
  });
  </script>
  
  <style lang="scss">
  .el-form-item {
    margin-bottom: 10px;
  }
  </style>
  
  <style lang="scss" scoped></style>
  